.search_bar_box {
    height: 100rpx;

    width: 750rpx;
    background-color: #fff;
    position: fixed;
    top: 0rpx;
    z-index: 100;
    .search_bar {
      /*  #ifdef  APP-PLUS  */
      margin-top: 50rpx;
      /*  #endif  */
      width: 100%;
      height: 100rpx;
      line-height: 100rpx;
      background-color: #fff;
      position: fixed;
      top: 0rpx;
      z-index: 100;
      padding: 0 30rpx;
    }
    /* #ifdef APP-PLUS */
    .fixed_title {
      width: 100%;
      height: 150rpx;
      background-color: #f5f5f5;
      position: fixed;
      top: 0rpx;
      z-index: 99;
      padding: 50rpx 30rpx;
    }
    /* #endif */
  }



  .serach-page{
    /* #ifdef APP-PLUS */
    margin-top: 50rpx;
    /* #endif */
    height: 100vh;
    position: absolute;
    top: 0;
    z-index: 1000;
    background-color: #fff;
    .other_search_bar_box {
      height: 100rpx;
      display: flex;
      width: 750rpx;
      background-color: #fff;
      // position: fixed;
      // top: 0rpx;
      // z-index: 100;
      .other_search_bar {
        /*  #ifdef  APP-PLUS  */
        margin-top: 50rpx;
        /*  #endif  */
        width: 85%;
        height: 100rpx;
        line-height: 100rpx;
        background-color: #fff;
        // position: fixed;
        // top: 0rpx;
        // z-index: 100;
        padding: 0 0 0 30rpx;
      }
      .cancel{
        line-height: 100rpx;
        padding-left: 15rpx;
      }
      /* #ifdef APP-PLUS */
      .fixed_title {
        width: 100%;
        height: 150rpx;
        background-color: #f5f5f5;
        position: fixed;
        top: 0rpx;
        z-index: 99;
        padding: 50rpx 30rpx;
      }
      /* #endif */
    }
    .recent-box{
      padding: 0 30rpx;
      .recent-title{
        display: flex;
        justify-content: space-between;
        .recent-title-l{
          font-size: 30rpx;
          font-weight: 500;
        }
      }
      .recent-item-box{
        display: flex;
        flex-wrap: wrap;
        margin-top: 20rpx;
        .recent-item{
          height: 50rpx;
          padding: 0 16rpx;
          line-height: 50rpx;
          text-align: center;
          border-radius: 30rpx;
          color: #5c5c5c;
          background-color: #f4f4f4;
          margin-right: 20rpx;
          margin-bottom: 10rpx;
        }
      }
    }
    .hot-box{
      padding: 0 30rpx;
      margin-top: 50rpx;
      .hot-title{
        display: flex;
        justify-content: space-between;
        .hot-title-l{
          font-size: 30rpx;
          font-weight: 500;
        }
      }
      .hot-item-box{
        display: flex;
        flex-wrap: wrap;
        margin-top: 20rpx;
        .hot-item{
          height: 50rpx;
          padding: 0 16rpx;
          line-height: 50rpx;
          text-align: center;
          border-radius: 30rpx;
          color: #5c5c5c;
          background-color: #f4f4f4;
          margin-right: 20rpx;
          margin-bottom: 10rpx;
        }
      }
    }
  }